<template>
	<div id="Tweet">
		<x-header :left-options="{showBack: false}" title="" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="content">
			<h2>{{article.article_title}}</h2>
			<div class="desc">
				<img :src="'/los' + articleInfo.expert_headimg" alt="" />
				<span class="name">{{article.article_author}}</span>
				<span class="atten">+关注</span>
			</div>
			<div class="timer">
				<span>{{add_time}}</span>&nbsp;&nbsp;
				<img src="../assets/images/home/cion_dot.png" alt="" /> &nbsp;&nbsp;&nbsp;&nbsp;
				<span>专业推文</span>&nbsp;&nbsp;
				<img src="../assets/images/home/cion_dot.png" alt="" /> &nbsp;&nbsp;&nbsp;&nbsp;
				<span>浏览 {{article.article_count}}</span>
			</div>
			<div class="article">
				<img :src="'/los' +article.article_thumb" alt="" />
				<p>{{article.article_keywords}}</p>
				<div class="matter" v-html="article.article_content">{{article.article_content}}</div>
			</div>
			<div class="sign">
				<p class="times"><i class="pm-icon icon-eye"></i> {{article.article_count}}</p>
				<!--<p class="other">
					<img src="../assets/images/home/defaultImg.jpg" alt="" />
					<img src="../assets/images/home/defaultImg.jpg" alt="" />
				</p>-->
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				article: '',
				articleInfo: '',
				add_time: ''
			}

		},
		components: {
			XHeader
		},
		mounted() {
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		activated() {
			this.getArticle();
		},
		methods: {
			getArticle: function() {
				let article_id = this.$route.params.article_id;
				this.$http({
					method: 'GET',
					url: '/los/api/article/details.json?article_id=' + article_id,
					data: ''
				}).then((result) => {
					this.article = result.data.article;
					this.add_time = this.timer2time(this.article.add_time);
					var params = {
						expert_name: this.article.article_author
					}
					this.$http({
						method: 'POST',
						url: '/los/api/appraisal/expert_info.json',
						data: params
					}).then((result) => {
						this.articleInfo = result.data.data;
					}).catch((err) => {})
				}).catch((err) => {

				})
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd hh:mm:ss");
			},

			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	#Tweet {
		background: #fff;
	}
	
	.header {
		background: #fff;
		position: relative;
	}
	
	.header:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200%;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}
	
	.content {
		margin-top: 0.86rem;
	}
	
	.content h2 {
		font-size: 0.66rem;
		line-height: 0.93rem;
		text-align: center;
		color: #333;
		padding: 0 0.44rem;
	}
	
	.content .desc {
		line-height: 0.88rem;
		margin-top: 0.61rem;
		overflow: hidden;
		padding: 0 0.44rem;
	}
	
	.content .desc img {
		float: left;
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 50%;
	}
	
	.content .desc .name {
		font-size: 0.4rem;
		color: #333;
		margin-left: 0.26rem;
	}
	
	.content .desc .atten {
		float: right;
		width: 1.94rem;
		height: 0.66rem;
		line-height: 0.66rem;
		background: #da4240;
		color: #fff;
		border-radius: 0.33rem;
		text-align: center;
		font-size: 0.37rem;
		margin-top: 0.13rem;
	}
	
	.content .timer {
		margin-top: 0.32rem;
		font-size: 0.32rem;
		color: #777;
		padding: 0 0.44rem;
		position: relative;
	}
	
	.content .timer img {
		position: absolute;
		top: 0.1rem;
	}
	
	.content .article {
		margin-top: 0.69rem;
	}
	
	.content .article img {
		width: 100%;
		height: 5.65rem;
	}
	
	.content .article p {
		margin: 0.37rem 0 0.8rem;
		font-size: 0.37rem;
		color: #777;
		text-align: center;
	}
	
	.content .article .matter {
		font-size: 0.42rem;
		line-height: 0.64rem;
		padding: 0 0.26rem;
		color: #333;
	}
	
	.content .sign {
		margin-top: 0.6rem;
		overflow: hidden;
		padding: 0 0.26rem 0.53rem;
		font-size: 0.4rem;
		color: #777;
	}
	
	.content .sign .times {
		float: left;
		line-height: 0.86rem;
	}
	
	.content .sign .other {
		float: right;
		line-height: 0.86rem;
	}
	
	.content .sign img {
		float: right;
		width: 0.82rem;
		height: 0.82rem;
		border-radius: 50%;
	}
</style>
<style>
	.matter img {
		width: 100%;
		height: 5.65rem;
	}
</style>